import { useEffect, useLayoutEffect, useState } from "react";
import styles from "./clock.less";
import cn from "classnames";
import icon_radius_triangle from "@/assets/icons/radius-triangle.png";

const GREEN = "green";
const YELLOW = "yellow";
const RED = "red";

const Clock = () => {
  const [sectorBgc, setSectorBgc] = useState(RED);
  const [rotateDeg, setRotateDeg] = useState()

  // 绘制刻度
  const handleDrawerScale = () => {
    const ul = document.getElementById("scale");
    for (let i = 0; i < 120; i++) {
      //创建li标签
      let li = document.createElement("li");
      //给所有里标签添加旋转属性
      li.style.transform = `translate(-50%) rotate(${i * 3}deg)`;
      //把li标签添加到ul里面
      ul.appendChild(li);
      //给所有ul标签里的li标签添加一个里的类名
      ul.children[i].classList.add("li");
    }
    //为每个时刻添加样式
    for (let j = 0; j < 12; j++) {
      ul.children[j * 10].classList.add("lip");
    }
  };

  useEffect(() => {
    handleDrawerScale();
  }, []);

  useEffect(() => {
    const tem = 29
    const deg = tem*2.13
    setRotateDeg(deg)
  }, [])

  const sectorStyle = {
    borderColor: `${
      sectorBgc === GREEN
        ? "transparent transparent rgba(205, 234, 255, 0.6) rgba(205, 234, 255, 0.6) "
        : sectorBgc === YELLOW
        ? "rgba(255, 232, 219, 0.6) transparent"
        : "transparent rgba(255, 221, 221, 0.6) rgba(255, 221, 221, 0.6) transparent"
    } `,
    transform: `${
      sectorBgc === GREEN
        ? "rotate(-1deg)"
        : sectorBgc === YELLOW
        ? "rotate(0)"
        : "rotate(1deg)"
    }`,
  };
  return (
    <div style={{ position: "relative" }}>
      <div className={styles.circle}>
        <div className={styles.circle_inner}>
          <ul id="scale"></ul>
          <div className={styles.sector} style={sectorStyle}></div>
          <span
            className={cn(
              styles.greenText,
              sectorBgc === GREEN ? styles.greenActiveText : ""
            )}
          >
            过冷
          </span>
          <span
            className={cn(
              styles.yellowText,
              sectorBgc === YELLOW ? styles.yellowActiveText : ""
            )}
          >
            舒适
          </span>
          <span
            className={cn(
              styles.redText,
              sectorBgc === RED ? styles.redActiveText : ""
            )}
          >
            过热
          </span>
          <div className={styles.innerCircle} style={{transform: `rotate(${rotateDeg || 0}deg)`}}>
            <img
              className={styles.triImg}
              src={icon_radius_triangle}
              alt="img"
            />
            <div className={styles.innerCircle_inner}></div>
          </div>
        </div>
      </div>
      <div className={styles.mask}></div>
    </div>
  );
};

export default Clock;
